<template>
	<view class="choos_file">
		<view @click="chooseUploadWay(index)" class="choos_file_item" v-for="(item, index) in chooseFileList"
			:key="index" :style="{ backgroundImage: `url(${item.bgPath})` }">
			<text class="text" :style="{ color: item.textColor }">{{ item.text }}</text>
			<view class="describe" :style="{ color: item.textColor }">{{ item.describe }}</view>
		</view>
		<view v-if="isHome" @click="goIdpage()" class="choos_file_item"
			:style="{ backgroundImage: `url(${identityCard.bgPath})` }">
			<text class="text" :style="{ color: identityCard.textColor }">{{ identityCard.text }}</text>
			<view class="describe" :style="{ color: identityCard.textColor }">{{ identityCard.describe }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "chooseFile",
	props: {
		isHome: {
			default: false,
			typeof: Boolean
		},


	},
	data() {
		return {
			chooseFileList: [{
				bgPath: 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/wechat_file.png',
				text: '微信文件',
				describe: '微信聊天文件',
				textColor: '#2D9184',
			}, {
				bgPath: 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/wechat_photo.png',
				text: '微信图片',
				describe: '微信聊天图片打印',
				textColor: '#336492',
			}, {
				bgPath: 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/phone_file.png',
				text: '手机文件',
				describe: '手机本地文件',
				textColor: '#A2673D;',
			}, {
				bgPath: 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/phone_photo.png',
				text: '手机图片',
				describe: '手机本地图片打印',
				textColor: '#806AB0',
			},
			{
				bgPath: 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/wechat_file.png',
				text: '发票打印',
				describe: '微信聊天文件',
				textColor: '#2D9184;',
			},
				// {
				// 	bgPath: 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/testpaper.png',
				// 	text: '更多...',
				// 	describe: '选择更多的文件打印途径',
				// 	textColor: '#143c62',
				// },
			],
			localList: [],
			identityCard: {
				bgPath: 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/upload/1728549803042886.png',
				text: '身份证',
				describe: '身份证打印',
				textColor: '#336492',
			}
		};
	},
	methods: {
		goList(index) {
			const nowIndex = index == 4?0:index
			uni.navigateTo({
				url: `/pages/otherPage/uploadFileList?index=${nowIndex}`
			})
		},
		goIdpage() {
			this.nav_to('/pages/otherPage/identityCard')
		},
		chooseUploadWay(index) {
			index = Number(index)
			if (!this.$store.state.storeInfo.ID) {
				uni.showToast({
					title: `请先选择店铺`,
					icon: `none`
				})
				return
			}
			if (this.isHome) {
				this.goList(index)
				return
			}
			switch (index) {
				case 0:
					// 微信聊天上传
					this.wxMessageUpload(0)
					break;
				case 1:
					// 微信聊天上传
					this.wxMessageUpload(1)
					break;
				case 2:
					// webview上传
					uni.navigateTo({
						url: `/pages/systemUpload/index`
					})
					break;
				case 3:
					let _this = this;
					let ind = 1;
					uni.chooseImage({
						count: 9, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function (res) {
							console.log(res);
							res.tempFiles.forEach(async item => {
								let o = {
									duration: 0,
									fileType: 1,
									tempUrl: item.path,
									flieUrl: item.path,
									tempKey: uni.$u.guid(8),
									pro: 0
								}

								if (ind == 1) {
									_this.localList.push(o);
								} else {
									_this.localList.splice(ind, 1, o)
								}
								await _this.uploading(o.flieUrl, o.tempKey, item.name);

								ind = ind + 1;
							});
						}
					});
					break;
				case 4:
					// this.$emit('showMore')
					this.wxMessageUpload(0)

					break;
				default:
					console.log('Unknown fruit.');
			}
		},
		// 文件上传
		async uploading(url, tempKey, name) {
			console.log('url ----------' + url);

			const r = await this.$upload(url, pro => {
				this.localList.forEach(item => {
					if (item.tempKey == tempKey) {
						item.pro = pro;
					}
				})
			})
			this.localList.forEach(item => {
				if (item.tempKey == tempKey) {
					item.netPath = r;
				}
			});



			console.log('upload file ' + r);
			console.log('文件名', name);
			let newReqData = {
				UserID: uni.getStorageSync('user').UserID,
				Shops_ID: this.$store.state.storeInfo.ID,
				DeviceCode: this.$store.state.storeInfo.DeviceCode || null,
				Url: r,
				FileName: name
			}
			console.log('调用上传接口');
			let res = await this.$api.post('PrintedFiles/SetFiles', newReqData);
			uni.hideLoading();
			this.$emit('fileListAdd', res.data)
			if (res.code == 0) {
				this.$pv.msg('上传成功')
				this.closeUpLoadPop()
			} else {
				this.$pv.msg('上传失败')
			}
			// uni.navigateTo({
			// 	url: `/pages/otherPage/uploadFileList`
			// })
		},
		// 微信聊天上传
		wxMessageUpload(uploadType) {

			let _this = this;
			let ind = 1;
			wx.chooseMessageFile({
				count: 10, //限制选择的文件数量
				type: uploadType == 0 ? 'file' : uploadType == 1 ? 'image' : 'all', //非图片和视频的文件,不选默认为all
				//type:'video',//视频
				//type:'image',//图片
				success(res) {
					console.log(res);
					res.tempFiles.forEach(async item => {
						let o = {
							duration: 0,
							fileType: uploadType == 0 ? 'file' : 1,
							tempUrl: item.path,
							flieUrl: item.path,
							tempKey: uni.$u.guid(8),
							pro: 0
						}

						if (ind == 1) {
							_this.localList.push(o);
						} else {
							_this.localList.splice(ind, 1, o)
						}
						uni.showLoading({
							title: '上传中'
						});
						await _this.uploading(o.flieUrl, o.tempKey, item.name);
						uni.hideLoading()
						ind = ind + 1;
					});

				},
				fail() {
					
				},
				complete() {

					

				}
			})
			// uni.navigateTo({
			// 	url: `/pages/otherPage/uploadFileList`
			// })
		},
		closeUpLoadPop() {
			this.$emit('closeUpLoadPop')
		}
	}
}
</script>

<style lang="scss" scoped>
.choos_file {
	width: 702rpx;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	box-sizing: content-box;
	padding: 30rpx 0;

	.choos_file_item {
		background-size: 100% 100%;
		margin-top: 24rpx;
		width: 340rpx;
		height: 160rpx;

		&:nth-child(2n+1) {
			margin-right: 22rpx;
		}

		box-sizing: border-box;
		padding: 24rpx;
		display: flex;
		flex-direction: column;

		.text {
			font-weight: bold;
			font-size: 32rpx;
		}

		.describe {
			font-weight: 500;
			font-size: 24rpx;
			margin-top: 12rpx;
			max-width: 192rpx;
		}
	}
}
</style>